Component({
  /**
   * 组件的属性列表
   */
  properties: {
    cleft1: {
      type:Number,
      value: -1000
    },
    cndUrl:{
      type: String,
      value: ""
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    toolSel: 3,
    ctx1: "",
    sx1: 0,
    xy1: 0,
    mx1: 0,
    my1: 0,

    color: ["#f1d82c", "#c0cd25", "#8fb525", "#62a131", "#2c913d", "#177e77", "#106591", "#145294", "#334b90", "#5d2f81", "#761e71", "#a0185e", "#bf1942", "#d95721", "#e5881d", "#ecb722"],
    dcolorIndex:'',
    scolor:'none',
   
    dcolor: "#000000",
    saveColor: "#000000",
    lineWidth: 1,
    cLineWidth: 6,

    getCanvas: ''
  },
  ready() {
    var _this = this;

    //画布一
    this.ctx1 = wx.createCanvasContext("chuabu1", this);

    this.ctx1.setFillStyle('#edeef4')
    this.ctx1.fillRect(0, 0, 640, 640)
    this.ctx1.draw(true)
    this.ctx1.setStrokeStyle(this.data.dcolor);
    this.ctx1.setLineWidth(this.data.cLineWidth);
    this.ctx1.setLineCap("round")


    setTimeout(function () {
      _this.getCanvasImg();
    }, 1000)
   
  },

  /**
   * 组件的方法列表
   */
  methods: {
    getColorfn(e) { // 选择颜色
      var color = e.target.dataset.color
      var index = e.target.dataset.index + 1
      console.log(e.target.dataset.index)
      this.setData({
        dcolor: color,
        scolor: color,
        saveColor: color,
        //showColor: false,
        dcolorIndex: index
      })
    },
    careafn(e) { // 笔触大小
      //console.log(e.detail);
      var linewidth = this.data.lineWidth + parseInt(e.detail);
      console.log('b'+linewidth)

      this.setData({
        cLineWidth: linewidth
      })


    },
    starthb1(e) { // 画布一
      //console.log(e)
      this.sx1 = e.touches[0].x;
      this.sy1 = e.touches[0].y;
      console.log(this.ctx1)
      this.ctx1.setLineWidth(this.data.cLineWidth);
      this.ctx1.setStrokeStyle(this.data.dcolor);
      this.ctx1.beginPath();
      this.ctx1.moveTo(this.sx1, this.sy1);
    },
    movehb1(e) { // 画布一
      var _this = this;
      this.mx1 = e.touches[0].x;
      this.my1 = e.touches[0].y;
      this.ctx1.lineTo(this.mx1, this.my1);
      this.ctx1.stroke();
      this.ctx1.draw(true);
      this.ctx1.moveTo(this.mx1, this.my1);
    },
    endhb1(e) { // 画布一
      var _this = this;
      this.ctx1.closePath();
      console.log("离开画布")
      this.getCanvasImg(); 
    },
    getCanvasImg() {//******************** */
      var _this = this;
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 750,
        height: 1213,
        canvasId: "chuabu1",
        success: function (res) {
          console.log(res)
          _this.setData({
            getCanvas: res.tempFilePath
          })
        }
      }, this)
    },
    selToolfn(e) { // 画布工具
      console.log(e.currentTarget.dataset.sel);
      var sel = e.currentTarget.dataset.sel
      if (sel == 1) {  
        console.log(this.data.dcolor)
        this.setData({
          saveColor: this.data.dcolor
        })

      }
      this.setData({
        toolSel: sel
      })
      if (sel == 1) { // 橡皮擦
        this.setData({
          dcolor: "#eeeff4",
          scolor: 'none',
          showColor: false
        })
      }
      if (sel == 2) {
        var showColor=this.data.showColor
          this.setData({
            showColor: !showColor
          })
        
        
      }
      if (sel == 3) { // 选择画笔
        this.setData({
          //dcolor: "#000000",
          dcolor: this.data.saveColor,
          scolor: 'none',
          showColor: false,
          dcolorIndex: ''
        }, function () {
          this.ctx1.setStrokeStyle(this.data.dcolor);
        })
      }
    },
    closeColorboard2() {
      this.setData({
        showColor: false,
        toolSel: 3
      })
    },
    closeColorboard() {
      this.setData({
        showColor: false
      })
    },
    saveImagelx2() { // 练习二 保存图片
      var _this = this;
      this.saveImage(function () {
        _this.loadCanvasImg("chuabu1")
      })
     
    },
    getBase64() {
      var _this = this;
      wx.canvasToTempFilePath({ //获取生成的临时图片
        canvasId: 'chuabu1',
        success: function (res) {
          wx.getFileSystemManager().readFile({   // 文件管理系统按照base64方式读取生成的图片
            filePath: res.tempFilePath, //选择图片返回的相对路径
            encoding: 'base64', //编码格式
            success: res => { //成功的回调
              var base64 = 'data:image/png;base64,' + res.data
              //console.log("图片数据")
              //console.log(base64)

              _this.triggerEvent("lx2Event", base64)
            }
          }, this)
        }
      }, this)

    },
    saveImage(fn) { // 打开保存图片授权
      var _this = this;
      console.log(123)
      wx.getSetting({
        success: (res) => {
          if (!res.authSetting['scope.writePhotosAlbum']) {
            wx.authorize({
              scope: 'scope.writePhotosAlbum',
              success: () => {
                // 同意授权
                console.log("同意授权")
                if (fn) {
                  fn()
                }
              },
              fail: (res) => {
                console.log(res);
              }
            })
          } else {
            // 已经授权了
            console.log("已经授权了");
            if (fn) {
              fn()
            }
          }
        },
        fail: (res) => {
          console.log(res);
        }
      })
    },
    loadCanvasImg(id) {
      var _this = this;
      wx.showLoading({
        title: '保存中...',
      })
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 750,
        height: 1213,
        canvasId: id,
        success: function (res) {
          console.log(res)
          let pic = res.tempFilePath;

          wx.saveImageToPhotosAlbum({
            filePath: pic,
            success(res) {
              wx.hideLoading();
              wx.showToast({
                title: '保存成功',
                icon: 'success',
                duration: 2000
              });
            },
            complete() {
              wx.hideLoading();
            }
          });
        }
      },this);


    },
  }
})
